<template>
    <div>
          <div id="A"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";



//声明周期函数，自动执行初始化
onMounted(() => {
  init();
});
//初始化函数
function init() {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("A"));
  // 绘制图表
  let optionsa = {
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      
    },
    
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '20%',
      data: [10, 52, 200, 334, 390, 330, 220,256,379,70,400,380]
    },
  ]
};

  // 渲染图表
  Chart.setOption(optionsa);
}
</script>

<style scoped>
#A {
width:550px;
height: 300px;
float: left;
margin-left: 30px;
margin-top: 15px;
}
</style>